<!-- backend/templates/base.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>物流决策支持系统</title>
    <!-- 引入自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选：可以引入字体图标或其他CSS库 -->
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
        <div class="container-fluid">
            <!-- 网站标题 -->
            <a class="navbar-brand" href="#">物流决策支持系统</a>
            <!-- 可折叠按钮用于移动设备 -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <!-- 导航链接 -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/data_upload">数据上传</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/forecast_generate">需求预测</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/visualization">数据可视化</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/report_generate">报告生成</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/user_manage" id="userManageNav">用户管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/change_password">修改密码</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">退出</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主内容区域 -->
    <div class="container mt-5 pt-4">
        <!-- 此处会插入其他页面内容 -->
        {% block content %}
        {% endblock %}
    </div>

    <!-- 引入Bootstrap的JavaScript库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义脚本 -->
    <script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
    <script>
        // DOM内容加载完毕后执行的代码
        document.addEventListener('DOMContentLoaded', () => {
            // 从sessionStorage中获取用户角色信息
            const userRole = sessionStorage.getItem('userRole');
            const userManageNavItem = document.getElementById('userManageNav');

            // 根据用户角色决定是否显示用户管理菜单
            if (userRole !== '管理员') {
                // 如果用户角色不是管理员，则隐藏用户管理选项
                userManageNavItem.style.display = 'none';
            }

            // 获取登出按钮，并添加事件监听器
            const logoutButton = document.querySelector('a[href="/logout"]');
            if (logoutButton) {
                logoutButton.addEventListener('click', async (e) => {
                    // 阻止默认的链接跳转
                    e.preventDefault();
                    try {
                        // 向登出API发送POST请求
                        const response = await fetch('/api/auth/logout', {
                            method: 'POST', // 请求方法
                            credentials: 'include', // 包含Cookies
                        });
                        // 检查请求是否成功
                        if (response.ok) {
                            // 清除sessionStorage中的用户角色信息
                            sessionStorage.removeItem('userRole');
                            // 跳转到主页
                            window.location.href = '/';
                        } else {
                            console.error('登出失败'); // 如果登出失败，打印错误信息
                        }
                    } catch (error) {
                        // 捕获并打印错误信息
                        console.error('登出时发生错误:', error);
                    }
                });
            }
        });
    </script>
</body>
</html>
